<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        img {
            width: 300px;
            height: 400px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <!-- <img id="img" src="./img/loading.gif" data-img="http://ps3.tgbus.com/uploadfiles/201101/20110104102301111.jpg" alt=""> -->
    <div id="app">
        <img id="img" v-preload="imgSrc" alt="">
        <img id="img" v-preload="imgSrc" src="./img/5-121204193934-51.gif" alt="">
    </div>
</body>
<script>
    /*
        图片预加载
        目的：在网络状态较差的情况下，使用大小较小的loading图片提示用户正在加载
        原理：img标签的src属性或主动发送图片加载请求，在JS中隐藏的完成图片加载
            浏览器对相同地址图片只会完成一次请求，其它位置会直接读取缓存
    */
    // function preLoad(el){
    //     var imgDom=new Image();
    //     //发送请求，在JS中隐藏的完成图片加载
    //     imgDom.src=el.getAttribute("data-img");
    //     let imgSrc=imgDom.src;
    //     imgDom.onload=function(){
    //         el.src=imgSrc;
    //     }
    // }
    // preLoad(document.getElementById("img"))
    Vue.directive("preload",function(el,binding){
        var imgDom=new Image();
        //如果用户没有给loading的加载图片，用默认的
        if(el.src==""){
            el.src=""
        }
        el.style.objectFit="none";
        imgDom.src=binding.value;
        imgDom.onload=function(){
            //此时浏览器缓存中已经存在图片，直接在内存中取
            el.src = binding.value;
            el.style.objectFit = "";
        }
    });

    new Vue({
        el:"#app",
        data:{
            //请求的图片地址
            imgSrc:"http://ps3.tgbus.com/uploadfiles/201101/20110104102301111.jpg"
        }
    });
</script>

</html>